import { Outlet } from "react-router-dom"
import MyHeader from "./header"
import MyMenu from "./menu"
import React from 'react';
import { Layout, theme } from 'antd';

const { Header, Content, Footer, Sider } = Layout;

const App: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout>
      <Sider
      >
        <MyMenu />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} >
            <MyHeader />
        </Header>
        <Content style={{ margin: '24px 16px 0' }}>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default App;